<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
</head>
<body>
    <!-- 
        设置为flex布局后，子元素的float、clear、vertical-align失效

        容器:
        flex-direction: row | row-reverse | column | column-reverse;
        flex-wrap：nowrap | wrap | wrap-reverse
        flex-flow：<flex-direction> || <flex-wrap>;
        justify-content：flex-start | flex-end | center | space-between | space-around;
        align-items：stretch | flex-start | flex-end | center | baseline;
            stretch如果项目未设置高度或设为auto，将占满整个容器的高度
        align-content：stretch | flex-start | flex-end | center | space-between | space-around;

        子项:
        order: <integer>; /* default 0 */
        flex-grow: <number>; /* default 0 */
        flex-shrink: <number>; /* default 1 */
        flex-basis: <length> | auto; /* default auto --- 项目的本来大小 */
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
            auto: 1 1 auto; none: 0 0 auto;
        align-self: auto | flex-start | flex-end | center | baseline | stretch;
     -->
    
</body>
</html>